<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
    </div>
    <div class="mt-2 p-2 bg-white">
      <thisSearch @action="onSearch" />
    </div>
    <a-empty class="py-32" description="暂无数据" v-if="!cover"></a-empty>
    <div class="mt-2 px-2" v-else>
      <!-- <img src="../../../assets/images/aa.png" /> -->
      <div class="flex-grow border relative">
        <img :src="cover" class="w-full h-full object-contain" alt="" />
        <div id="bind-container" ref="divWrap" class="absolute border inset-0"></div>
      </div>

      <this-sliders :lines="lines" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, createVNode, render, Fragment } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { ref } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import thisSearch from './search.vue';
import { defHttp, HOST } from '/@/utils/http/axios';
import thisSliders from './sliders.vue';

export default defineComponent({
  components: {
    LayoutBreadcrumb,
    DownloadOutlined,
    thisSearch,
    CheckOutlined,
    thisSliders,
  },
  setup() {
    const project = ref({});
    const cover = ref();
    const lines = ref([]);
    const divWrap = ref();

    function onSearch(params) {
      getProject(params.projectId);
      getSensors(params.projectId);
      getChartData(params);
    }

    function getChartData(params) {
      defHttp
        .post({
          url: `/data-analysis/get-statistics`,
          params,
        })
        .then((res) => {
          let arr = res.data.sensors.map((item) => {
            let limit = item.data.splice(0, 20);
            console.log(item.name, 1111);
            return {
              name: item.name ?? item.no,
              x: limit.map((item2) => item2.ts.slice(0, 10)),
              y: limit.map((item3) => item3.data1),
            };
          });
          console.log(arr);
          lines.value = arr;
        });
    }

    function getProject(pid) {
      defHttp.get({ url: `/project/get-sensor-topo?id=${pid}` }).then((res) => {
        project.value = res.data;
        if (res.data.logo) {
          let path = res.data.logo.split(',')[0];
          cover.value = HOST + '/szfiles' + path;
        }
      });
    }

    function getSensors(pid) {
      defHttp
        .get({
          url: '/sensor/get-by-project-id',
          params: { projectId: pid },
        })
        .then((res) => {
          // sensors.value = res.data;
          renderSensors(res.data);
        });
    }

    function renderSensors(nodes) {
      render(
        createVNode(
          Fragment,
          null,
          nodes
            .filter((item) => item.y !== 0 && item.x !== 0)
            .map((item) => {
              return createVNode(
                'span',
                {
                  class: 'text-white absolute',
                  style: `top: ${item.y - 116}px; left: ${item.x - 525}px`,
                },
                item.name || item.no,
              );
            }),
        ),
        divWrap.value,
      );
    }

    return {
      lines,
      onSearch,
      cover,
      divWrap,
    };
  },
});
</script>
